<template>
    <view class="purchaseDetailContainer">
        <cunstom_navigation_bar :tapEvent="goback" :propStyles="propStyles" :title="'新增收货地址'">
        </cunstom_navigation_bar>
        <image class="bg" mode="widthFix" src="https://visionmpapi.jiuerjindi.com/upload/mp/editAddress/bg.png"></image>
        <view class="centerBox">
            <view class="container">
				<!--
                <view class="chooseAddr" @tap="jumpTo('/page_myAddress/myAddress')">
                    选择收货地址 >
                </view>
				-->
                <view class="form">
                    <view class="line">
                        <view class="label">门牌号</view>
                        <input v-model="detailAddr" placeholder="详细地址，例1层101室1" />
                    </view>
                    <view class="line">
                        <view class="label">标签</view>
                        <view class="types">
                            <view :class="tip=='家'? 'selected': 'type'" @tap="setTip('家')" >家</view>
                            <view :class="tip=='公司'? 'selected': 'type'"  @tap="setTip('公司')" >公司</view>
                            <view :class="tip=='学校'? 'selected': 'type'"  @tap="setTip('学校')" >学校</view>
                            <view :class="tip=='父母家'? 'selected': 'type'" @tap="setTip('父母家')" >父母家</view>
                        </view> 
                    </view>
                    <view class="line">
                        <view class="label">联系人</view>
                        <input class="name" v-model="name" placeholder="姓名" />
                        <view class="genderBox">
                            <view class="male" @tap="changeGender(1)">
                                <image v-if="gender==0" src="https://visionmpapi.jiuerjindi.com/upload/mp/editAddress/notSelect.png"></image>
                                <image v-else src="https://visionmpapi.jiuerjindi.com/upload/mp/editAddress/selected.png"></image>
                                先生
                            </view>
                            <view class="male" @tap="changeGender(0)">
                                <image v-if="gender==1" src="https://visionmpapi.jiuerjindi.com/upload/mp/editAddress/notSelect.png"></image>
                                <image v-else src="https://visionmpapi.jiuerjindi.com/upload/mp/editAddress/selected.png"></image>
                                女士
                            </view>

                        </view>
                    </view>
                    <view class="line">
                        <view class="label">手机号码</view>
                        <input v-model="phone"   />
                    </view>

                </view>
                <image @tap="save" class="saveBtn" src="https://visionmpapi.jiuerjindi.com/upload/mp/editAddress/save.png"></image>
            </view>
        </view>




    </view>
</template>
<script>
    const util = require("@/utils/util.js");
    const api = require("@/utils/api.js");
    var QQMapWX = require('../utils/qqmap-wx-jssdk.js');
    const mapChange = require('../utils/mapChange.js');

    const app = getApp();
    export default {
        data() {
            return {
				id: null,
                gender: 0,
                detailAddr: "",
                quantity: 1,
                mallProductId: '',
                selectedOption: {},
                openId: "",
                phone: '',
                name: '',
				tip : '家',

                imgDomain: "",

                propStyles: {
                    // iconSrc: "../https://visionmpapi.jiuerjindi.com/upload/mp/ucenter/backIcon.png",
                    iconSrc: "black",
                    // bgColor: '#FECF01',
                },
				type: null,

            };
        },
        computed: {

        },
        methods: {
            changeGender(num) {
                if (this.gender != num) {
                    this.gender = num
                }
            },
            jumpTo(url) {
                uni.navigateTo({
                    url: url,
                })
            },
			setTip(val){
				this.tip = val;
				console.log("-> this.tip:"+this.tip);
			},
			save(){
				let formData ={
					realname : this.name,
					mobile : this.phone,
					province : '江苏',
					city : '苏州市',
					area : '吴中区',
					address : this.detailAddr,
					longitude : ["120.577769"],
					latitude : ["31.287181"],
					tip : this.tip,
					id : this.id,
				}
				if(this.type=='add'){
					util.request(api.addressAdd, formData
					  , 'POST', 'application/x-www-form-urlencoded').then(res => {
						if (res.code == 200) {
							uni.navigateTo({
							  url: `/page_myAddress/myAddress`
							})
						} 
					  }).catch((err) => {
						console.log('err', err)
						reject(err);
					  });
				  }else{
					util.request(api.addressUpdate, formData
					  , 'POST', 'application/x-www-form-urlencoded').then(res => {
						if (res.code == 200) {
							uni.navigateTo({
							  url: `/page_myAddress/myAddress`
							})
						} 
					  }).catch((err) => {
						console.log('err', err)
						reject(err);
					  });
					  
				  }
			},
            goback() {
                console.log("回去");
                uni.navigateBack();
            },


        },
        onReady() { },
        // onShow(){

        //       },
        created() { },
        onShow: function () {

        },



        onLoad: function (option) {

            //option为object类型，会序列化上个页面传递的参数
            // console.log('onload~~~购买页面', option);
            // this.mallProductId = option.mallProductId;
            // this.skuId = option.skuId
            // this.quantity = Number(option.quantity)
            // this.getOrderAddress(option.id)
            // this.startDate = this.getDate() 
            this.imgDomain = process.env.VUE_APP_BASE_URL;
			this.type = option.type;
			console.log("->option.type:"+ option.type);
			if(this.type=="edit"){
				let obj = JSON.parse(option.obj);
				this.name = obj.realname;
				this.phone = obj.mobile;
				this.detailAddr = obj.address;
				this.tip = obj.tip;
				this.id = obj.id;
			}

        },

    };
</script>
<style lang="scss">
    page {
        height: 100vh;
        overflow: auto;
        background: #F4F4F2;
    }
</style>
<style lang="scss" scoped>
    .purchaseDetailContainer {
        background: #f4f4f2;
        box-sizing: border-box;

        /* ::v-deep .companyInfoContainer {
        position: absolute;
        top: 0rpx;
        left: 0rpx;
  
        .navigationBar {
          background: transparent;
        }
      } */
    }

    .bg {
        width: 750rpx;
        position: absolute;
        left: 0rpx;
        top: 0rpx;
    }

    .centerBox {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 56rpx;

        .container {
            width: 692rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            background: #FFFFFD;
            opacity: 1;
            z-index: 999;
            padding: 30rpx;

            .chooseAddr {
                line-height: 94rpx;
                font-weight: 500;
                text-align: center;
                font-size: 28rpx;
                color: #D93F11;
                width: 630rpx;
                height: 94rpx;
                background: #FFFFFF;
                border-radius: 20rpx 20rpx 20rpx 20rpx;
                border: 2rpx solid #D93F11;
            }

            .form {
                .line {
                    display: flex;
                    height: 100rpx;
                    align-items: center;

                    .label {
                        font-weight: 500;
                        font-size: 28rpx;
                        color: #333333;
                    }

                    input {
                        margin-left: 42rpx;
                    }

                    .types {
                        display: flex;
                        margin-left: 34rpx;

                        .type {
                            margin-right: 32rpx;
                            padding: 0rpx 18rpx;
                            text-align: center;
                            line-height: 34rpx;
                            height: 34rpx;
                            background: rgba(51, 51, 51, 0.1);
                            border-radius: 10rpx 10rpx 10rpx 10rpx;
                            font-weight: 400;
                            font-size: 20rpx;
                            color: #333333;
                        }
						.selected {
							margin-right: 32rpx;
							padding: 0rpx 18rpx;
							text-align: center;
							line-height: 34rpx;
							height: 34rpx;
							background: rgba(51, 51, 51, 0.1);
							border-radius: 10rpx 10rpx 10rpx 10rpx;
							font-weight: 400;
							font-size: 20rpx;
							color: #FECF01;
						}
                    }

                    .genderBox {
                        display: flex;

                        .male {
                            display: flex;
                            font-weight: 400;
                            font-size: 24rpx;
                            color: rgba(51, 51, 51, 0.6);
                            margin-right: 38rpx;

                            image {
                                width: 22rpx;
                                height: 22rpx;
                                margin-right: 14rpx;
                            }
                        }
                    }

                    .name {
                        width: 250rpx;
                    }
                }
            }
            .saveBtn{
                width: 684rpx;
                height: 138rpx;
                margin-top: 70rpx;
            }
        }
    }











    ::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
        color: transparent;
    }
</style>